<template>
    <div class="my-editor">
        <div style="border: 1px solid #ccc;">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor style="height: 500px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
                @onCreated="onCreated" />
        </div>
    </div>
</template>

<script>
/* 
    富文本编辑器 -> wangEditor

    1. 先下载  
       npm install @wangeditor/editor  @wangeditor/editor-for-vue --save

    2. 在引入
       import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

    3. 设置template结构和样式
 
 
*/

// 引入的局部组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    name: "EditorView",
    components: {
        Editor,
        Toolbar
    },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: {
                /* toolbarKeys: [
                    // 菜单 key
                    'headerSelect',

                    // 分割线
                    '|',

                    // 菜单 key
                    'bold', 
                    '|',
                    'italic',
                    '|',

                    // 菜单组，包含多个菜单
                    {
                        key: 'group-more-style', // 必填，要以 group 开头
                        title: '更多样式', // 必填
                        iconSvg: '<svg>....</svg>', // 可选
                        menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
                    },
                    // 继续配置其他菜单...
                ] */

            },
            editorConfig: {
                placeholder: '请输入内容...',
                // readOnly:true,
                maxLength: 1000,
                hoverbarKeys: {
                    'link': {
                        // 重写 link 元素的 hoverbar
                        menuKeys: ['editLink', 'unLink', 'viewLink'],
                    },
                    'image': {
                        // 清空 image 元素的 hoverbar
                        menuKeys: [],
                    }
                },
                MENU_CONF:{
                    bgColor:{
                        colors: ['#000', '#333', '#666']
                    },
                    uploadImage:{
                        server: 'http://localhost:3000/admin/banner/add',
                        async customUpload(file, insertFn) {  // 自定上传  => 上传成功之后会执行此回调函数, 
 
                            insertFn("https://img14.360buyimg.com/pop/s1180x940_jfs/t1/149940/25/34043/99823/647ffc85F3fba0724/26bacbd9b01fc3e4.jpg.avif", 123123, 45456); // 传入到富文本编辑器中的图片信息
                        }
                    }
                }
            },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            // 等编辑器组件创建完毕 => 返回编辑器实例
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错

            /*  this.toolbarConfig.toolbarKeys = [
                 // 菜单 key
                 'headerSelect',
 
                 // 分割线
                 '|',
 
                 // 菜单 key
                 'bold', 'italic',
 
                 // 菜单组，包含多个菜单
                 {
                     key: 'group-more-style', // 必填，要以 group 开头
                     title: '更多样式', // 必填
                     iconSvg: '<svg>....</svg>', // 可选
                     menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
                 },
                 // 继续配置其他菜单...
             ] */
        },
    },
    watch: {
        html: function (newVal) {
            console.log("编辑器内容改变了", newVal);
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>


<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
// @import url("@wangeditor/editor/dist/css/style.css");   // css2.1 
// @import "@wangeditor/editor/dist/css/style.css";        // sass引入的写法
</style>